<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="del">删除</button>
    <button class="login">登录</button>
    <script>
        function Model(title = '', content = '') {
            this.modelbox = document.createElement('div')
            this.modelbox.className = 'modelbox'
            this.modelbox.innerHTML = `
            <div class="model-header">${title}<i class="close">X</i></div>
            <div class="model-body">${content}</div>`

        }
        Model.prototype.open = function () {
            document.body.appendChild(this.modelbox)
        }
        const login = document.querySelector('.login')
        const del = document.querySelector('.del')
        login.addEventListener('click', function () {
            const loginModel = new Model('登录', '登录成功')
            loginModel.open()
        })
        del.addEventListener('click', function () {
            const delModel = new Model('删除', '删除成功')
            delModel.open()
        })
        const closeButton = this.modelbox.querySelector('.close');
        closeButton.addEventListener('click', () => {
            this.close();
        });

    </script>
</body>

</html>